<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import type { ApplicationModel } from '@/types/modules/application-models'

import { useModelLists } from '@/views/ApplicationModels/ApplicationModels'

const props = defineProps<{
  data: ApplicationModel[]
  showIncludeSubCheckbox?: boolean
}>()

const includeSub = defineModel<boolean>('includeSub')
const modelId = defineModel<ApplicationModel['id']>('modelId')
const current = computed(() => {
  return unref(props.data).find(v => v.id === unref(modelId))
})
const {
  toApplicationModelConfigs,
  toApplicationModels,
} = useModelLists()

function clickItem(o: ApplicationModel) {
  modelId.value = o.id
}
</script>

<template>
  <ElDropdown>
    <div class="align-center flex">
      <span style="color: var(--el-color-primary);margin-right: 5px;">{{ current?.name }}</span>
      <ElIcon color="var(--el-color-primary)">
        <ArrowDown />
      </ElIcon>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem
          v-for="item in data"
          :key="item.id"
          @click="clickItem(item)"
        >
          {{ item.name }}
        </ElDropdownItem>
        <ElDropdownItem v-if="showIncludeSubCheckbox" divided>
          <ElCheckbox
            v-model="includeSub"

            label="包含子级"
          />
        </ElDropdownItem>
        <ElDropdownItem
          divided
          @click="toApplicationModels"
        >
          <ElLink type="primary" :underline="false">
            模型管理
          </ElLink>
        </ElDropdownItem>
        <ElDropdownItem @click="toApplicationModelConfigs">
          <ElLink type="primary" :underline="false">
            模型配置
          </ElLink>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>
